$w:10rem;
$c:blue;

// 头部
header{
    width: $w;
    height: 1.3333rem;
    display: flex;
    background: $c;
    justify-content: space-between;

    a{
        color: #fff;
        font-size: .5333rem;
        margin-top: .3rem;
        margin-left: .3rem;
    }

    h4{
        font: .5333rem/1.3333rem "微软雅黑";
        color: #fff;
        font-weight: 800;
    }

    .appDown{
        width: 1.28rem;
        img{
            width: .9067rem;
            margin: 0.2rem 0.4rem .2rem 0;
        }

    }
}


// 商品列表
#goods{
    width: $w;
    .goods{
        li{
            a{
                margin: .2rem;
                display: flex;

                .img{
                  padding: 0 .2667rem 0 0; 
                }
                div.title{
                    display: flex;
                    flex-direction: column;

                    h4{
                        margin: .2667rem 0;
                        width: 6.9333rem;
                        height: 1.52rem;
                        font-size: .4rem;
                        font-weight: normal;
                        color: #333;
                    }

                    div{
                        display: flex;
                        margin-top: .2rem;
                        span{
                            &:nth-of-type(1){
                                color: #666;
                                width: 3.5451rem;
                                height: .4949rem;
                                margin-right: 1rem;
                            }

                            &:nth-of-type(2){
                                width: 1.5901rem;
                                color: #666;
                                margin-left: .2rem;
                            }
                        }

                        i{
                            img{
                                width: .4267rem;
                            }
                        }

                    }
                }
            }
        }
    }
}


// 尾部
.footer{
    width: $w;
    background: #f4f4f4;
    height: 5.9768rem;
    div{
        width: $w;
        background: #f4f4f4;
        &:nth-of-type(1){
            // padding: .2667rem;
            text-align: center;
            padding-top: .3rem;
            a{  
                display: block;
                color: #333;
                font: .3467rem/.8533rem "微软雅黑";
                border: .0267rem solid #cecece;
                border-radius: .2rem;
               
                margin: 0 .1rem;
            }
        }
        &:nth-of-type(2){
            background: $c;
            margin: .2667rem 0 .16rem 0;
            height: .9333rem;
            display: flex;
            justify-content: space-between;
            span{
                color: #fff;
                font: .48rem/.9333rem"";
                margin-left: .2rem;
            }
            a{
                padding: 0 .2667rem 0 0;
                img{
                    width: .5333rem;
                    float: right;
                    margin: .2rem 0;
                }
            }
        }
        &:nth-of-type(3){
            // width: $w;
            border: .0267rem solid #cecece;
            border-left: none;
            border-right: none;
            // display: flex;
            // padding: 0 .4rem;
            margin-top: .5rem;

            a{
                text-align: center;
                display: block;
                color: #333;
                height: .88rem;
                display: inline-block;
                border-right: .0267rem solid #cecece;
                font: .3733rem/.88rem "";
                &:nth-of-type(1){
                    width: 1.6733rem;
                    padding: 0 .5333rem;
                }
                &:nth-of-type(2){
                    width: 2.9333rem;
                }
                &:nth-of-type(3){
                    width: 3.34rem;
                    border-right: none;
                }
            }
        }
        &:nth-of-type(4){
            text-align: center;
            p{
                margin: .3rem 0;
                a{
                    font-size: .3467rem;
                    color: #333;
                   
                }
            }
        }
    }
}
